﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta name="keywords" content="jQuery DropDownList, List, ListBox, Popup List, jqxDropDownList, jqxListBox, List Widget, ListBox Widget, DropDownList Widget" /> 
    <meta name="description" content="The jqxListBox can be populated with data from an existing select element making it easier to upgrade your pages using jqxListBox."/>
    <title id='Description'>The jqxListBox can be populated with data from an existing select element making it easier to upgrade your pages using jqxListBox.</title>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/gettheme.js"></script>
    <script type="text/javascript" src="../../scripts/jquery-1.8.2.min.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxlistbox.js"></script>
</head>
<body>
    <div id='content'>
        <script type="text/javascript">
            $(document).ready(function () {
                var theme = getTheme();

                // Create a jqxListBox
                $("#jqxListBox").jqxListBox({ width: 200, height: 250, theme: theme });
                // Load the data from the Select html element.
                $("#jqxListBox").jqxListBox('loadFromSelect', 'select');

                $("#jqxListBox").bind('select', function (event) {
                    if (event.args) {
                        var args = event.args;
                        // select the item in the 'select' tag.
                        var index = args.item.index;
                        $("#select").find('option').eq(index).attr("selected", "true");
                    }
                });

                $("#select").bind('change', function (event) {
                    var index = $("#select")[0].selectedIndex;
                    $("#jqxListBox").jqxListBox('selectIndex', index);
                    $("#jqxListBox").jqxListBox('ensureVisible', index);
                });
            });
        </script>
        <div style='float: left; width: 500px;' id='jqxWidget'>
            <div style='float: left;' id='jqxListBox'></div>
            <div style='float: left;' id='Select'>
                <select style='height: 250px; width: 200px; margin-left: 30px;' size='2' id='select'>
                    <option>Affogato</option>
                    <option>Americano</option>
                    <option>Bicerin</option>
                    <option>Breve</option>
                    <option>Café Bombón</option>
                    <option>Caffé Corretto</option>
                    <option>Café Crema</option>
                    <option>Caffé Latte</option>
                    <option>Caffé macchiato</option>
                    <option>Café mélange</option>
                    <option>Coffee milk</option>
                    <option>Cafe mocha</option>
                    <option>Cappuccino</option>
                    <option>Carajillo</option>
                    <option>Cuban espresso</option>
                    <option>Espresso</option>
                    <option selected="true">The Flat White</option>
                    <option>Frappuccino</option>
                    <option>Galao</option>
                    <option>Greek frappé coffee</option>
                    <option>Iced Coffee﻿</option>
                    <option>Indian filter coffee</option>
                    <option>Instant coffee</option>
                    <option>Irish coffee</option>
                    <option>Liqueur coffee</option>               
                </select>
            </div>
        </div>
    </div>
</body>
</html>
